<template>
	<view>
		<uni-file-picker :image-styles="imageStyles" :list-styles="listStyles" :limit="limit" fileMediatype="image"
			:title="title" v-model="fileLists" :sourceType="sourceType" @select="select" @progress="progress"
			@success="success" @fail="fail" @delete="deletea">
			<!--自定义 -->
			<slot />
		</uni-file-picker>
	</view>
</template>

<script>
// import { fileURL,fileUpload }from "@/utils/base"
import config from "../../../config";
import { getToken } from '@/utils/auth'
export default {
	name: "uploadImg",
	props: {
		limit: {
			type: Number,
			default: 9,
		},
		title: {
			type: String,
			default: ''
		},
		value: {
			type: Array,
			default: () => []
		},
		imageStyles: {
			type: Object,
			default: () => {
				// return {
				// 	width:64,
				// 	height:64,
				// 	border:{
				// 		color:"#ff5a5f",
				// 		width:2,
				// 		style:'dashed',
				// 		radius:'2px'
				// 	}
				// };
			},
		},
		listStyles: {
			type: Object,
			default: () => {
				// return {
				// 	// 是否显示边框
				// 	border: true,
				// 	// 是否显示分隔线
				// 	dividline: true,
				// 	// 线条样式
				// 	borderStyle: {
				// 		width:1,
				// 		color:'blue',
				// 		radius:2
				// 	}
				// };
			},
		},
	},
	data() {
		return {
			// 图片回显
			fileLists: [],
			sourceType: ['album', 'camera'],
		};
	},
	watch: {
		value: {
			handler: function (val, oldVal) {
				let list = val.map(v => {
					let item = {
						// url : fileURL+v,
						url: v,
						extname: '',
						name: '',
					}
					return item
				})
				this.fileLists = list
			},
			deep: true,
			immediate: true
		},
	},
	methods: {
		// 获取上传状态
		select(e) {
			// if (e.tempFiles[0].size > 2097152) {
			// 	uni.showToast({
			// 		title: '图片不能超过2m，请重新选择',
			// 		icon: 'none',
			// 		duration: 2000
			// 	})
			// 	return
			// }
			this.$emit('start')
			const tempFilePaths = e.tempFilePaths;
			console.log(e.tempFiles[0].size, '状态');
			tempFilePaths.forEach(file => {
				this.uploadFileFn(file, e.tempFiles[0].size)
			})
		},
		uploadFileFn(file) {
			const fileUpload = config.baseUrl + '/xcx/common/upload';
			uni.uploadFile({
				url: fileUpload,
				filePath: file,
				name: 'file',
				header: {
					"token": getToken(),
				},
				// 成功函数
				success: (res) => {
					console.log('上传成功');
					let uploaddata = JSON.parse(res.data)
					let data = uploaddata.data
					let x = {}
					// 下面3个值是uni-app规定的一个不能少
					// x.url = fileURL+data.originalImageUr
					x.url = data.url
					x.extname = ''
					x.name = data.fileName
					x.ossId = data.ossId
					this.fileLists.push(x)
					this.emitDataFn(this.fileLists)
				},
				// 失败提示用户重新上传
				fail: error => {
					console.log('失败', error);
				}
			})
		},
		// 删除
		deletea(e) {
			let path = e.tempFilePath
			let fileLists = this.fileLists.filter(v => v.url !== path)
			this.fileLists = fileLists
			// console.log(fileLists);
			this.emitDataFn(fileLists)
		},
		emitDataFn(fileLists) {
			this.$emit('change', fileLists)
			// let imgUrlArr = fileLists.map(v => {
			// 	// let imgPath = v.url.replace(fileURL, "")
			// 	let imgPath = v.url
			// 	return imgPath
			// })
			// // console.log(imgUrlArr);
			// this.$emit('change',imgUrlArr)
		},
		// 获取上传进度
		progress(e) {
			console.log('上传进度：', e)
		},
		// 上传成功
		success(e) {
			console.log('上传成功', e)
		},
		// 上传失败
		fail(e) {
			console.log('上传失败：', e)
		},
	}
}
</script>

<style lang="scss"></style>